<template>
  <div class="modules theme-dark">
    <div v-if="type === 1" class="flex between baselight2 ptb20 plr20 ft16 bgheader">
      <span>{{$t('Total Assets')}}: ${{ currentAccounts.balance }}</span>
      <a class="blue" href="javascript:" @click="showFinancialTables(2)">
        {{$t('Financial records')}}
      </a>
    </div>
    <div v-else class="between baselight2 ptb20 plr20 ft16 bgheader flex alcenter">
      <div>
        <span class="pointer" @click="showFinancialTables(1)">{{$t('coin currencyAccount')}}</span> / <span class="blue">{{$t('Financial records')}}</span>
      </div>
      <a-select v-model="filter.name" :placeholder="$t('Please select currency')" style="width: 260px" @change="handleChange">
        <a-select-option v-for="item in coinTypes" :key="item" :value="item">
          {{ item }}
        </a-select-option>
      </a-select>
<!--      <a-button type="link" @click="$router.push({name:'recharge'})">Recharge</a-button>-->
    </div>
    <a-table v-if="type===1" :columns="columns" :data-source="currentAccounts.list" :pagination="false" class="ptb10">
      <span v-if="['USDT','ETH','BTC'].indexOf(record.name) != -1" slot="action" slot-scope="text, record">
        <a-button type="link" @click="$router.push({name: 'withdrawOpen',query: { coinType: record.name }})">{{$t('Withdraw')}}</a-button>
        <a-divider type="vertical"/>
        <a-button type="link" @click="rechargeHandler(record)">{{$t('recharge')}}</a-button>
      </span>
    </a-table>
    <div v-else class="ptb10">
      <div class="flex alcenter baselight mb10 plr20">
        <span class="flex1">{{ $t('Currency') }}</span>
        <span class="flex1 tc">{{ $t('type') }}</span>
        <span class="flex1 tc">{{ $t('Record') }}</span>
        <span class="flex1 tc">{{ $t('Time') }}</span>
      </div>

      <div v-if="records.length <= 0">
        <div class="tc ptb40">
          <img
              alt=""
              class="wt70"
              src=""
          />
          <p>{{ $t('No record yet') }}</p>
        </div>
      </div>
      <div v-for="(item) in records" v-else :key="item.id" class="flex alcenter ptb10 bdbheader plr20">
        <span class="flex1">{{ item.name }}</span>
        <span class="flex1 tc">{{ item.type }}</span>
        <span class="flex1 tc">{{ item.transResult }}</span>
        <span class="flex1 tc">{{ item.createTime }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {assetsCoinSelect, getAssetsTradeInfo, getAssetsLog, getAssetsRecharge} from "@/api/asset";
import {Select} from 'ant-design-vue'

export default {
  components: {
    ASelect: Select
  },
  data() {
    return {
      coinTypes: [],
      type: 1,
      assets: [
        {
          name: "USDT",
          available: "0.00000000",
          underreview: "0.00000000",
          folded: "0.0000000000",
        },
      ],
      showExpandedRowRender: false,
      currentAccounts: {
        list: [],
        balance: 0,
        id: ''
      },
      records: [],
      rules: {},
      ruleForm: {},
      filter: {
        // name: null,
        type: 'trade'
      },
      columns: [
        {title: this.$t('Currency'), key: 'name', dataIndex: 'name'},
        {title: this.$t('Available'), key: 'useAmount', dataIndex: 'useAmount'},
        {title: this.$t('under review'), key: 'amount', dataIndex: 'amount'},
        {title: this.$t('folded')+'($)', key: 'allAmount', dataIndex: 'allAmount'},
        {
          title: this.$t('Action'), key: 'action', scopedSlots: {customRender: 'action'},
        }
      ]
    };
  },
  methods: {
    rechargeHandler(record) {
      getAssetsRecharge().then(res => {
        const {ERC20, TRC20, BTC} = res.data
        // 充值(直接返回地址，USDT 对应ERC20 TRC20 两个地址，ETH对应ERC20一个地址，BTC对应BTC一个地址)
        const data = record.name === 'USDT' ? {ERC20, TRC20} : record.name === 'ETH' ? {ERC20} : {BTC}
        this.$router.push({name: 'rechargeOpen', query: {data: JSON.stringify(data)}});
      })
    },
    refresh() {
      this.loadAssetsCloudInfo()
    },
    handleChange() {
      this.loadAssetsLog()
    },
    expandedRowRenderHandler() {
      this.showExpandedRowRender = !this.showExpandedRowRender;
    },
    loadAssetsCloudInfo() {
      getAssetsTradeInfo().then(({data}) => {
        this.currentAccounts = data
      })
    },
    showFinancialTables(i) {
      this.type = i
      if (i === 2) {
        this.loadAssetsLog()
      } else {
        this.loadAssetsCloudInfo()
      }
    },
    loadCoinList() {
      assetsCoinSelect().then(({data}) => {
        this.coinTypes = data
      })
    },
    loadAssetsLog() {
      getAssetsLog(this.filter).then(res => {
        this.records = res.data
      })
    },
    handleCancel() {
      this.showExpandedRowRender = false
    }
  },
  mounted() {
    this.loadAssetsCloudInfo()
    this.loadCoinList()
  },
};
</script>

<style>
:deep .ant-select-dropdown {
  background-color: #0B0E11 !important;
}


.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  .dialog-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  .dialog-body {
    width: 700px;
    top: 50%;
    transform: translateY(40%);
    /* //left: 50%;
    //transform: translate(-50%, -50%); */
    margin: 0 auto;
    background-color: #0B0E11;
    padding: 25px;
  }
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
<style lang="scss" scoped>
.assets {
  min-height: 500px;
}

:deep(.ant-select-arrow) {
  color: white;
}
</style>
